Skip to content

Conversation

@ArgoZhang
Copy link
Member

@ArgoZhang ArgoZhang commented Mar 20, 2025

Link issues

fixes #5669

Summary By Copilot

This pull request includes several changes to the BootstrapBlazor project, focusing on the AutoFill and AutoComplete components. The changes aim to improve the layout, functionality, and performance of these components.

Changes to AutoFill Component:

  • Removed unnecessary class attributes from AutoFill elements to simplify the markup. [1] [2] [3] [4] [5] [6]
  • Added new properties Model5 and Items5 and updated the logic to use these properties. [1] [2] [3] [4]
  • Changed the dropdown menu structure from <ul> to <div> for better styling and flexibility. [1] [2] [3]
  • Adjusted default values for RowHeight and OverscanCount to improve virtual scrolling performance.
  • Added a new property PlaceHolderStyleString to handle custom row height styles.
  • Improved the OnClearValue and LoadItems methods to reset state and optimize rendering. [1] [2]

Changes to AutoComplete Component:

  • Updated dropdown menu structure from <ul> to <div> for consistency and better styling. [1] [2]
  • Added logic to apply custom classes and offsets to the dropdown menu based on attributes.
  • Adjusted the default offset for the dropdown menu in PopoverCompleteBase.cs.

General Updates:

  • Updated the project version to 9.5.0-beta09.

These changes collectively enhance the usability and performance of the AutoFill and AutoComplete components in the BootstrapBlazor project.

Regression?

  • Yes
  • No

Risk

  • High
  • Medium
  • Low

Verification

  • Manual (required)
  • Automated

Packaging changes reviewed?

  • Yes
  • No
  • N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • Merge the latest code from the main branch

Summary by Sourcery

Refactors the AutoFill and AutoComplete components to improve layout, functionality, and performance. Addresses jittering issues during fast mouse scrolling by adjusting virtual scrolling parameters and optimizing rendering logic.

Enhancements:

  • Improves virtual scrolling performance in the AutoFill component by adjusting default values for RowHeight and OverscanCount.
  • Updates the dropdown menu structure in AutoFill and AutoComplete components from
      to
      for better styling and flexibility.
    • Optimizes the OnClearValue and LoadItems methods in the AutoFill component to reset state and improve rendering.
    • Adds logic to apply custom classes and offsets to the AutoComplete dropdown menu based on attributes.
    • Removes unnecessary class attributes from AutoFill elements to simplify the markup.
    • Adds a new property PlaceHolderStyleString to handle custom row height styles in the AutoFill component.
    • Adjusts the default offset for the dropdown menu in PopoverCompleteBase.cs.
    • Introduces Model5 and Items5 properties to the AutoFill component and updates the logic to use these properties.

@bb-auto bb-auto bot added the enhancement New feature or request label Mar 20, 2025
@bb-auto bb-auto bot added this to the v9.4.0 milestone Mar 20, 2025
@sourcery-ai
Copy link
Contributor

sourcery-ai bot commented Mar 20, 2025

Reviewer's Guide by Sourcery

This pull request refactors the AutoFill and AutoComplete components to improve layout, functionality, and performance. The dropdown menu structure was changed from <ul> to <div> for better styling. Virtual scrolling performance was improved by adjusting default values for RowHeight and OverscanCount. A new property PlaceHolderStyleString was added to handle custom row height styles. The OnClearValue and LoadItems methods were optimized to reset state and improve rendering. Logic was added to apply custom classes and offsets to the dropdown menu based on attributes. The default offset for the dropdown menu in PopoverCompleteBase.cs was adjusted.

No diagrams generated as the changes look simple and do not need a visual representation.

File-Level Changes

Change Details Files
Refactored dropdown menu structure from <ul> to <div> in AutoFill and AutoComplete components for better styling and flexibility.
  • Replaced <ul> with <div> for the dropdown menu.
  • Adjusted CSS classes to reflect the change in element type.
  • Modified the rendering logic to accommodate the new structure.
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor
Improved virtual scrolling performance in the AutoFill component by adjusting default values for RowHeight and OverscanCount.
  • Changed the default RowHeight from 33f to 50f.
  • Changed the default OverscanCount from 4 to 3.
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
Added a new property PlaceHolderStyleString to the AutoFill component to handle custom row height styles.
  • Introduced PlaceHolderStyleString property.
  • Implemented logic to apply custom height styles based on RowHeight.
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor
Optimized the OnClearValue and LoadItems methods in the AutoFill component to reset state and improve rendering performance.
  • Reset various state variables in OnClearValue.
  • Set _render flag to false before loading items and true after loading items in LoadItems to prevent jitter when mouse scrolling too fast.
  • Removed unnecessary count calculation in LoadItems.
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
Added logic to apply custom classes and offsets to the dropdown menu in the AutoComplete component based on attributes.
  • Added javascript logic to read custom classes and offsets from attributes.
  • Applied custom classes to the dropdown menu.
  • Applied custom offsets to the dropdown menu.
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.js
Adjusted the default offset for the dropdown menu in PopoverCompleteBase.cs.
  • Changed the default offset from '[0, 10]' to '[0, 6]'.
src/BootstrapBlazor/Components/AutoComplete/PopoverCompleteBase.cs
Removed unnecessary class attributes from AutoFill elements in the sample.
  • Removed class="mb-3" from AutoFill elements.
  • Removed class="row" and class="col-12" from AutoFill elements.
src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor
Added new properties Model5 and Items5 and updated the logic to use these properties in the sample.
  • Added Model5 property.
  • Added Items5 property.
  • Updated the logic to use Model5 and Items5.
src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor
src/BootstrapBlazor.Server/Components/Samples/AutoFills.razor.cs
Removed AddClassFromAttributes from ClassString properties in AutoFill and AutoComplete components.
  • Removed AddClassFromAttributes from ClassString property in AutoFill component.
  • Removed AddClassFromAttributes from ClassString property in AutoComplete component.
src/BootstrapBlazor/Components/AutoFill/AutoFill.razor.cs
src/BootstrapBlazor/Components/AutoComplete/AutoComplete.razor.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#5669 Prevent jitter in the AutoFill component when mouse scrolling too fast.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@ArgoZhang ArgoZhang merged commit acb3c9e into main Mar 20, 2025
4 checks passed
@ArgoZhang ArgoZhang deleted the feat-fill branch March 20, 2025 07:38
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

Overall Comments:

  • The change from <ul> to <div> for dropdown menus might affect existing CSS styles; ensure compatibility.
  • Removing AddClassFromAttributes might break some existing styling; consider if there's a better way to handle this.
Here's what I looked at during the review
  • 🟡 General issues: 1 issue found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟡 Complexity: 1 issue found
  • 🟢 Documentation: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@codecov
Copy link

codecov bot commented Mar 20, 2025

Codecov Report

Attention: Patch coverage is 90.00000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 99.98%. Comparing base (1e1454a) to head (849e9f5).
Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
...tstrapBlazor/Components/AutoFill/AutoFill.razor.cs 78.57% 3 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##              main    #5670      +/-   ##
===========================================
- Coverage   100.00%   99.98%   -0.02%     
===========================================
  Files          654      654              
  Lines        29683    29690       +7     
  Branches      4216     4216              
===========================================
+ Hits         29683    29687       +4     
- Misses           0        3       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor(AutoFill): prevent jitter when mouse scrolling too fast

2 participants